<!DOCTYPE html>
<!--suppress ALL-->
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.thymeleaf.org"
      layout:decorator="layout/master">
<body layout:fragment="content">
<link rel="stylesheet" type="text/css" href="/css/catalog.css">
<header class="zy_search_top_box">
    <div class="zy_search_top fix">
        <div class="one" href="javascript:" onclick="history.back();"><img src="/images/back_jt.png"></div>
        <div class="box">
            <span><img src="/images/icon_search.png"/></span>
            <input type="text" placeholder="零食点心" value="" />
        </div>
        <div class="r">
            <span>分类</span>
            <dl>
                <dt></dt>
                <dd><a href="/product/category">分类</a></dd>
            </dl>
        </div>
        <script type="text/javascript">
            $(function(){
                $(".zy_search_top .r span").mousedown(
                    function(event){
                        $(".zy_search_top .r dl").fadeToggle()
                        event.stopPropagation();//阻止冒泡
                    }
                )
                $("html,body").mousedown(
                    function(){
                        $(".zy_search_top .r dl").fadeOut()
                    }
                )
            })
        </script>
    </div>
</header>

<!-- 内容框 -->
<div class="zy_module-content">
    <!-- 左边分类栏目 ps：l_left .l_right最好不要用div包裹起不然会有些小问题 -->
    <div class="l_left" id="con_left">
        <!--标题-->
        <ul class="job_sub" id="scroller1" th:utext="${allCategory}">
        </ul>
    </div>
    <!-- 设置 .l-left .l_right 的top值-->
    <script type="text/javascript">
        $(function(){
            var h=$(".zy_search_top_box").height();
            $("#con_left,#con_right").css("top",h);
        })
    </script>
    <!-- content 右边产品图-->
    <div class="l_right" id="con_right">
        <div class="rightBox" id="scroller" >
            <!-- 二级  -->
            <div class="fr_ite fr_ite_1" data-cataid="1">
                <!-- 二级数据显示 -->
                <div class="sub_ites">
                    <span>[[${categoryName}]]</span>
                </div>
                <!-- 三级显示 -->
                <div th:utext="${data}">

                </div>
            </div>
            <!-- 二级end -->
        </div>
        <!-- rightBox -->
    </div>
    <!-- content end -->


    <!-- 底部导航 -->
    <div th:replace="layout/layout::foot_menu"></div>
</div>

<!-- 搜索框 -->
<div class="search_bomb_box zy_search_bomb_box">
    <div class="search_top fix">
        <a><img src="/images/back_jt.png"></a>
        <form method="get" action="/product/list">
            <div>
                <span><img src="/images/icon_search.png"></span>
                <input type="text" name="keyword" placeholder="精品零食">
            </div>
            <button type="submit">搜索</button>
        </form>
    </div>
    <div th:replace="layout/layout::hot_search"></div>
</div>
<script type="text/javascript">
    $(function(){
        $(".zy_search_top .box").mousedown(
            function(){
                $(".search_bomb_box").show()
                $(".zy_search_top_box").hide()
                $(".zy_module-content").hide()
            }
        )
        $(".search_bomb_box .search_top>a").mousedown(
            function(){
                $(".search_bomb_box").hide()
                $(".zy_search_top_box").show()
                $(".zy_module-content").show()
            }
        )
    })
</script>

<!-- 分类滑动 js 为了不影响其他js的正常，这几个放在最低下-->
<script type="text/javascript" src="/js/iscroll.js"></script>
<script type="text/javascript">
    var myScroll,myScrollri;
    var $ulLeft;var cataId = 0;

    function pullUpAction () {
        setTimeout(function () {
            myScrollri.refresh();
        }, 500);
    }

    function init_left_li(){
        var total_hei = $ulLeft.height();//总高度
        var li_height = $ulLeft.find("li").height();//单个li高度
        var li_num = $ulLeft.find("li").length;//个数
        console.log($ulLeft.find(".off").offset().top);
    }
    /**
     * 初始化iScroll控件
     */
    function loaded() {
        $ulLeft = $("#con_left");
        myScroll = new IScroll("#con_left",{
            mouseWheel: true,
            click: true,
            preventDefault: false,
            preventDefaultException: { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|A)$/ }
        })
        myScrollri = new IScroll("#con_right",{
            mouseWheel: true, click: true
        })
        myScrollri.on("scrollStart",function(){
            pullUpAction();
        });
        myScrollri.on("scroll",function(){
            pullUpAction();
        });
        myScrollri.on("scrollEnd",function(){
            $('.fr_ite_'+cataId).find("img").lazyload({
                threshold: 200
            }).on('load', function() {
                pullUpAction();
            });
        });
        $('.job_sub li').eq(0).click();
    }
    //初始化绑定iScroll控件
    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
    document.addEventListener('DOMContentLoaded', loaded, false);

    /* 切换内容*/
    $(function(){
        // $('.job_sub li').click(function(){
        //     $(this).addClass('off').siblings().removeClass('off');
        //     var str = "#con_left li:nth-child("+($(this).index()+1)+")";
        //     setTimeout(function () {
        //         myScroll.scrollToElement(document.querySelector(str));
        //     }, 300);
        //     cataId = $(this).attr("data-cataId");
        //     $('.fr_ite_'+$(this).attr("data-cataId")).removeClass('disp').siblings().addClass('disp');
        //     /* $('.fr_ite_'+$(this).attr("data-cataId")).find("img").lazyload({effect: "fadeIn"}); */
        //     pullUpAction();
        //     myScrollri.scrollTo(0,0,100, IScroll.utils.ease.elastic);
        //     /* myScrollri = new IScroll("#con_right",{
        //         mouseWheel: true, click: true
        //     }) */
        // });
        // $(".fr_ite ul").each(function(){
        //     if($(this).find("li").length == 1){
        //         $(this).addClass("left_num1");
        //     }else if($(this).find("li").length == 2){
        //         $(this).addClass("left_num2");
        //     }
        // })
        // $(".img_lazy").lazyload({effect: "fadeIn"});
    });
</script>

</body>
</html>